<template>
  <div class="tc-rank-container">
    <el-card class="search-card">
      <template #header>
        <div class="card-header">
          <span>体测成绩排名查询</span>
        </div>
      </template>
      
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="120px">
        <!-- 排序条件 -->
        <el-form-item label="排序条件" prop="orderArg">
          <el-input
            v-model="queryParams.orderArg"
            placeholder="请输入排序条件：0(按学校)、1(按学校/年级)、2(按学校/年级/班级)"
            clearable
            style="width: 300px"
          />
          <div class="input-tip">0:按学校排序, 1:按学校/年级排序, 2:按学校/年级/班级排序</div>
        </el-form-item>

        <!-- 学生ID -->
        <el-form-item label="学生ID" prop="id">
          <el-input
            v-model="queryParams.id"
            placeholder="请输入学生ID"
            clearable
            style="width: 200px"
          />
        </el-form-item>

        <!-- 体测项目 -->
        <el-form-item label="体测项目ID" prop="tcxmid">
          <el-input
            v-model="queryParams.tcxmid"
            placeholder="请输入体测项目ID"
            clearable
            style="width: 200px"
          />
          <div class="input-tip">如：7(俯卧撑)、8(跳远)等</div>
        </el-form-item>

        <!-- 体测名称 -->
        <el-form-item label="体测名称ID" prop="tcnameid">
          <el-input
            v-model="queryParams.tcnameid"
            placeholder="请输入体测名称ID"
            clearable
            style="width: 200px"
          />
          <div class="input-tip">如：5(国考)、6(省考)等</div>
        </el-form-item>

        <!-- 学生信息筛选 -->
        <el-form-item label="学生姓名" prop="xsName">
          <el-input
            v-model="queryParams.xsName"
            placeholder="请输入学生姓名"
            clearable
            style="width: 200px"
          />
        </el-form-item>

        <el-form-item label="身份证号" prop="xsSfz">
          <el-input
            v-model="queryParams.xsSfz"
            placeholder="请输入身份证号"
            clearable
            style="width: 250px"
          />
        </el-form-item>

        <el-form-item label="学校ID" prop="xsSchool">
          <el-input
            v-model="queryParams.xsSchool"
            placeholder="请输入学校ID"
            clearable
            style="width: 200px"
          />
        </el-form-item>

        <el-form-item label="班级ID" prop="xsClassj">
          <el-input
            v-model="queryParams.xsClassj"
            placeholder="请输入班级ID"
            clearable
            style="width: 200px"
          />
        </el-form-item>

        <el-form-item label="性别" prop="xsSex">
          <el-input
            v-model="queryParams.xsSex"
            placeholder="请输入性别：男/女"
            clearable
            style="width: 200px"
          />
        </el-form-item>

        <el-form-item label="学号" prop="xsXh">
          <el-input
            v-model="queryParams.xsXh"
            placeholder="请输入学号"
            clearable
            style="width: 200px"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery" :loading="loading">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 结果显示 -->
    <el-card class="result-card" v-if="resultData">
      <template #header>
        <div class="card-header">
          <span>排名结果</span>
        </div>
      </template>
      
      <el-descriptions :column="3" border>
        <el-descriptions-item label="学生姓名">{{ resultData.xsName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="学号">{{ resultData.xsXh || '-' }}</el-descriptions-item>
        <el-descriptions-item label="身份证号">{{ resultData.xsSfz || '-' }}</el-descriptions-item>
        <el-descriptions-item label="学校ID">{{ resultData.xsSchool || '-' }}</el-descriptions-item>
        <el-descriptions-item label="班级ID">{{ resultData.xsClassj || '-' }}</el-descriptions-item>
        <el-descriptions-item label="体测项目ID">{{ resultData.tcxmid || '-' }}</el-descriptions-item>
        <el-descriptions-item label="体测名称ID">{{ resultData.tcnameid || '-' }}</el-descriptions-item>
        <el-descriptions-item label="得分">{{ resultData.sjDfsz || '-' }}</el-descriptions-item>
        <el-descriptions-item label="等级">{{ resultData.sjDfjb || '-' }}</el-descriptions-item>
        <el-descriptions-item label="排序条件">{{ resultData.orderArg || '-' }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 无数据提示 -->
    <el-card class="empty-card" v-if="!resultData && searched">
      <el-empty description="暂无排名数据" />
    </el-card>

    <!-- 加载状态 -->
    <el-dialog
      :visible="loading"
      title="查询中"
      width="30%"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div style="text-align: center;">
        <el-icon class="is-loading" size="24">
          <el-icon-loading />
        </el-icon>
        <p style="margin-top: 10px;">正在查询，请稍候...</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getTcRank } from '@/api/tc/tcsj'
import { ElLoading } from 'element-plus'

export default {
  name: 'TcRank',
  data() {
    return {
      // 查询参数 - 初始化为null而不是空字符串
      queryParams: {
        orderArg: null,
        tcxmid: null,
        tcnameid: null,
        xsName: null,
        xsSfz: null,
        xsSchool: null,
        xsClassj: null,
        xsSex: null,
        xsXh: null,
        id: null
      },
      
      // 查询结果
      resultData: null,
      searched: false,
      loading: false
    }
  },
  
  methods: {
    // 处理查询
    handleQuery() {
      this.$refs.queryForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.searched = true
          
          // 构建请求参数，过滤掉null、undefined、空字符串和0值
          const params = {}
          Object.keys(this.queryParams).forEach(key => {
            const value = this.queryParams[key]
            
            // 只添加有意义的参数
            if (value !== null && value !== undefined && value !== '' && value !== 0) {
              // 将数字类型的参数转换为数字
              if (['orderArg', 'tcxmid', 'tcnameid', 'xsSchool', 'xsClassj', 'id'].includes(key)) {
                const numValue = Number(value)
                // 只有当转换后的数字不是NaN时才添加
                if (!isNaN(numValue)) {
                  params[key] = numValue
                }
              } else {
                params[key] = value
              }
            }
          })
          
          // 检查是否有必要的参数
          if (Object.keys(params).length === 0) {
            this.$message.warning('请至少输入一个查询条件')
            this.loading = false
            return
          }
          
          console.log('请求参数:', params) // 调试用
          
          // 显示加载对话框
          const loadingInstance = ElLoading.service({
            lock: true,
            text: '查询中，请稍候...',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          
          getTcRank(params)
            .then(response => {
              this.resultData = response.data
              this.$message.success('查询成功')
            })
            .catch(error => {
              console.error('查询失败:', error)
              this.$message.error('查询失败：' + (error.message || '请检查网络连接'))
            })
            .finally(() => {
              this.loading = false
              loadingInstance.close()
            })
        }
      })
    },
    
    // 重置查询
    resetQuery() {
      // 重置为null而不是空字符串
      this.queryParams = {
        orderArg: null,
        tcxmid: null,
        tcnameid: null,
        xsName: null,
        xsSfz: null,
        xsSchool: null,
        xsClassj: null,
        xsSex: null,
        xsXh: null,
        id: null
      }
      this.resultData = null
      this.searched = false
    }
  }
}
</script>

<style scoped>
.tc-rank-container {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.result-card {
  margin-top: 20px;
}

.empty-card {
  margin-top: 20px;
  text-align: center;
}

.el-form-item {
  margin-bottom: 15px;
  margin-right: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.input-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
  line-height: 1.4;
}

:deep(.el-input) {
  margin-right: 10px;
}

:deep(.el-form-item__content) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
</style>